<script>
import { bgLoginHeader } from "@/assets";
import { useTzRouter } from "@/vhooks/useTzRouter";
import { getUserInfo, setUserInfo } from "@/utils/storage";
import { OpenData } from "@tarojs/components";
import { getUserinfoApi } from "@/api/userApi";
import { onUnmounted, reactive } from "vue";
import { eventCenter, getCurrentInstance } from "@tarojs/taro";

export default {
  name: "Profile",
  components: {
    "open-data": OpenData,
  },
  props: {
    hideRechargeBtn: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { expose }) {
    const { navigateTo } = useTzRouter();

    const router = getCurrentInstance().router;

    const refreshBaseData = () => {
      getUserinfoApi().then((res) => {
        setUserInfo(Object.assign(state.userInfo, res.data));
      });
    };

    /**
     * 更新用户数据
     * NOTE: 这里监听子组件的 onShow
     * 详见：https://taro-docs.jd.com/taro/docs/vue-page#onshow-
     */
    eventCenter.on(router.onShow, () => {
      refreshBaseData();
    });

    onUnmounted(() => {
      eventCenter.off(router.onShow);
    });

    const state = reactive({
      userInfo: getUserInfo(),
    });

    expose({ refreshBaseData });

    const toPage = (path) => {
      if (!path) return;
      navigateTo({ path });
    };

    const showMoney = () => {
      return state.userInfo?.userType?.isPersonal; //hkBund 逻辑待定，只有个人账户可以充值
    };

    return () => {
      return (
        <tz-view class="profile">
          <tz-image class="bg_profile" src={bgLoginHeader}></tz-image>
          <tz-view class="avatar-info">
            <open-data class="avatar" type="userAvatarUrl" />
            <tz-view class="info">
              <tz-text>{state.userInfo.name}</tz-text>
              <tz-button
                class="btn-contact"
                round
                type="success"
                onClick={() => toPage("/pages/subUser/concat/index")}
              >
                联系客服
              </tz-button>
            </tz-view>
          </tz-view>
          <tz-view class="balance">
            {showMoney() ? "￥" + state.userInfo.balance : ""}
            {props.hideRechargeBtn || !showMoney() ? (
              ""
            ) : (
              <tz-button
                class="btn-topup"
                type="warn"
                round
                onClick={() => toPage("/pages/subUser/recharge/index")}
              >
                充值
              </tz-button>
            )}
          </tz-view>
        </tz-view>
      );
    };
  },
};
</script>

<style lang="scss">
.profile {
  width: 100%;
  position: relative;
  height: 91px;
  display: flex;
  justify-content: space-between;
  padding: 8px 15px;
  align-items: center;

  .bg_profile {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }

  .avatar-info {
    position: relative;
    display: flex;
    align-items: center;
    color: $white;
    font-size: 15px;
    flex: 1;
    z-index: 1;

    .avatar {
      width: 49px;
      height: 49px;
      border-radius: 50%;
      overflow: hidden;
      border: 1px solid $primary-color;
      flex: none;
      margin-right: 5px;
    }

    .info {
      display: flex;
      flex-direction: column;
      font-size: 16px;

      .btn-contact {
        width: 82px;
        height: 24px;
        border-color: 1px solid #8dc03c;
        margin-top: 8px;
      }
    }
  }
  .balance {
    color: $warning-color-end;
    font-size: 21px;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;

    .btn-topup {
      width: 88px;
      height: 32px;
      border: 1px solid $white;
      font-size: 16px;
      margin-top: 5px;
    }
  }
}
</style>
